<template>
  <div>
    <ZgDialog
      :width="view.width"
      :top="view.top"
      :title="view.title"
      v-model="visible"
    >
      <div v-if="initLoading">
        正在初始化配置数据...
      </div>
      <div v-else>
        <div v-if="!hasInit">
          初始化配置数据失败
        </div>
        <div :style="{padding:`${layout.视图边距}px`}">
          <ZgNewPage
            ref="page"
            title=""
            addBtnName=""
            :adminWidth="100"
            :conditions="conditions"
            :scrollX="800"
            :pageOpt="pageOpt"
            :dataBtns="dataBtns"
            @search="onSearch"
          >
            <template slot="columns">
              <a-table-column
                v-for="(column,i) in columns"
                :key="`column${i}`"
                :width="column.width"
                :title="column.label">
                <template slot-scope="record">
                  {{ record[column.code] }}
                </template>
              </a-table-column>
            </template>

          </ZgNewPage>

        </div>
      </div>
    </ZgDialog>
  </div>
</template>
<script>
import HeaderConfig from '../HeaderConfig'
export default {
  components: {
     HeaderConfig
  },
   props: {
    view: {
      type: Object,
      default: () => {
        return {
          width: '800px',
          top: '5%',
          height: 'auto',
          title: '下载模板'
        }
      }
    }

  },
  data () {
    return {
      visible: false,
      hasInit: true,
      initLoading: false,
      layout: {
        视图边距: 0
      },
      pageOpt: {
        showSearchBtn: false,
        showRefreshBtn: false,
        showConditionBtn: true,
        showHeaderConfig: false,
        showAttachBtn: false,
        showLayoutMode: false
      },
      columns: [
        { code: 'name', label: '模板名称', width: 120, isShow: true }
      ],
      conditions: [
        { code: 'name', compType: '单行文本', label: '模板名称', defaultVal: '' }
      ],

      dataBtns: [
        { key: 1, name: '下载', icon: 'fa-download', isShow: () => { return true } }

      ]

    }
  },
  mounted () {
  },
  methods: {

    onSearch (param) {
      // 加载表头
      const list = [
        { key: '1', id: '1', name: '测试1' },
        { key: '2', id: '2', name: '测试2' },
        { key: '3', id: '3', name: '测试3' }
      ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    },
    open () {
      this.visible = true
    }

  }
}
</script>

<style lang="scss" scoped>
</style>
